<script setup>
import { ref, onMounted } from 'vue'

// 定义用户信息
const user = ref(null)

// 页面加载时从 localStorage 中获取用户信息
onMounted(() => {
  const userData = localStorage.getItem('user')
  if (userData) {
    user.value = JSON.parse(userData)
  }
})
</script>

<template>
  <div class="home-page">
    <!-- 欢迎提示语 -->
    <h1 v-if="user">欢迎回来，{{ user.name }}！</h1>
    <h1 v-else>欢迎使用系统</h1>

    <!-- 用户信息展示 -->
    <el-card v-if="user">
      <template #header>
        个人中心
      </template>
      <div>
        <p><strong>账号：</strong>{{ user.no }}</p>
        <p><strong>姓名：</strong>{{ user.name }}</p>
        <p><strong>角色：</strong>
          <span v-if="user.roleId === 0">超级管理员</span>
          <span v-else-if="user.roleId === 1">管理员</span>
          <span v-else>普通用户</span>
        </p>
      </div>
    </el-card>

    <!-- 系统公告 -->
    <el-card>
      <template #header>
        系统公告
      </template>
      <div>这里是主页内容...</div>
    </el-card>
  </div>
</template>

<style scoped>
.home-page {
  padding: 20px;
}

h1 {
  font-size: 24px;
  margin-bottom: 20px;
  color: #333;
}

.el-card {
  margin-bottom: 20px;
}

.el-card__header {
  font-size: 18px;
  font-weight: bold;
}

.el-card div {
  font-size: 14px;
  line-height: 1.6;
}

.el-card p {
  margin: 10px 0;
}
</style>
